import { useRequest } from "@umijs/max"
import { Row, Col, Statistic } from "antd"
import React from "react"
import { getTodayData } from "./service"

const TodayCurrentData: React.FC<any> = () => {

    const {data} = useRequest(() => {
        return getTodayData({})
    })

    const colStyle = {
        justifyContent: 'center', display: 'flex'
    }

    const titleStyle = {
        color: '#fff',
        fontSize: 16
    }

    const valueStyle = {
        color: 'rgb(0, 255, 195)'
    }

    const list = [
        {
            title: '今日浏览量',
            value: data?.pvCount,
            id: 1,
        },
        {
            title: '今日搜索量',
            value: data?.searchCount,
            id: 2,
        },
        {
            title: '今日点击量',
            value: data?.clickCount,
            id: 3,
        },
        {
            title: '今日启动量',
            value: data?.runCount,
            id: 4,
        },
    ]

    return <div>
        <Row gutter={[30, 10]} align={'middle'} justify={'center'}>
            {list?.map(item => {
                return <Col key={item.id} span={12} style={colStyle}>
                    <Statistic
                        valueStyle={valueStyle}
                        title={<div style={titleStyle}>{item.title}</div>}
                        value={item.value}
                        // prefix={<LikeOutlined />}
                    />
                </Col>
            })}
        </Row>
    </div>
}

export default TodayCurrentData